<template>
	<div class="exam">
		<div class="info">
			<div class="name">考生名称：{{ userName }}</div>
			<div class="title">{{ examName }}</div>
			<div class="score">试卷总分：100分 考试计时：{{ examTime }}分钟</div>
		</div>
		<div class="audio">
			听力音频：
			<audio-player ref="audio" style="flex: 1" :fileurl="fileurl"></audio-player>
		</div>
		<div class="content">
			<div class="section">Section A</div>
			<div class="describe">
				Directions:
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(0, 7)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div style="width: 100%; display: flex; align-items: center">
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
								>{{ option }}</el-radio
							>
						</el-radio-group>
					</div>
				</div>
			</div>
			<div class="section">Section B</div>
			<div class="describe">
				Directions:
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(7, 15)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div
						style="
							width: 100%;

							display: flex;
							align-items: center;
						"
					>
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
								>{{ option }}</el-radio
							>
						</el-radio-group>
					</div>
				</div>
			</div>
			<div class="section">Section C</div>
			<div class="describe">
				Directions:
				<span
					>In this section,you will hear three news reports. At the end of each news report,you will
					hear two or three questions. Both the news report and the questions will be spoken only
					once. After you hear a question,you must choose the best answer from the four choices
					marked A),B),C)and D). Then mark the corresponding letter on Answer Sheet 1 with a single
					line through the centre.</span
				>
			</div>
			<div class="detail">
				<div class="list" v-for="item in sectionDetail.slice(15, 25)" :key="item.orderNum">
					<div class="insert" v-show="getInsert(item.orderNum)">
						{{ getInsert(item.orderNum) }}
					</div>
					<div style="width: 100%; display: flex; align-items: center">
						{{ item.orderNum }}.
						<el-radio-group style="margin-left: 20px" v-model="item.radio">
							<el-radio
								style="width: 100%"
								v-for="(option, index) in item.options"
								:label="index.toString()"
								:key="option"
								>{{ option }}</el-radio
							>
						</el-radio-group>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="leave" @click="leaveTest"><el-button type="primary">离开考试</el-button></div>
			<div class="submit" @click="stopTest"><el-button type="primary">提交试卷</el-button></div>
		</div>
	</div>
</template>

<script>
	import { getTestInfo, startTest, suspendTest, stopTest } from '@/api/user';
	import AudioPlayer from '@/components/AudioPlayer';

	export default {
		components: {
			AudioPlayer,
		},
		data() {
			return {
				examinationName: '',
				audioUrl: '',
				sectionDetail: [],
				audioUrl: '',
				originalUrl: '',
				isDown: '',
				id: '',
				examTime: 0,
				timer: null,
				isStopExam: false,
			};
		},
		computed: {
			fileurl() {
				return this.$baseUrl + this.audioUrl;
			},
			examName() {
				return this.examinationName || this.userInfo.InexamName;
			},
			userInfo() {
				return this.$store.getters.userInfo || {};
			},
			userName() {
				return this.userInfo.nickName;
			},
			currentTime() {
				return this.$refs.audio.$refs.audioRef.currentTime;
			},
		},
		created() {
			this.getExamInfo();
			this.getTestInfo();
		},
		mounted() {
			let _this = this;
			this.timer = setInterval(() => {
				_this.examTime = _this.examTime - 1;
				if (_this.examTime == 5) {
					_this.$modal.msgWarning('距离考试结束还有5分钟！');
				}
				if (_this.examTime == 0) {
					_this.$modal.msgWarning('考试结束！');
					_this.stopTest();
					clearInterval(this.timer);
				}
			}, 60 * 1000);
			this.$store.dispatch('GetUserInfo').then(() => {
				if (this.userInfo.InExamId) {
					let [currentTime, examTime, audioUrl] = this.userInfo.ExaminationTime.split(',');
					this.$router.push({
						path: '/exam-pro',
						query: {
							id: this.userInfo.InExamId,
							audioUrl,
							examTime,
							currentTime,
						},
					});
					if (this.userInfo.InExamId && this.userInfo.InExamId != this.id) {
						this.$modal.msgWarning('请继续完成上次考试!');
					}
					return;
				}
				this.startTest();
			});
		},
		beforeDestroy() {
			clearInterval(this.timer);
			if (this.userInfo.InExamId == this.id && !this.isStopExam) {
				this.suspendTest();
			}
		},
		methods: {
			getExamInfo() {
				let { examinationName, isDown, originalUrl, audioUrl, id, examTime } = this.$route.query;
				this.examTime = examTime;
				this.examinationName = examinationName;
				this.audioUrl = audioUrl;
				this.originalUrl = originalUrl;
				this.isDown = isDown;
				this.id = id;
			},
			async getTestInfo() {
				let params = {
					examinationId: this.id,
				};
				let {
					data: {
						data: { test },
					},
				} = await getTestInfo(params);
				const examAnswer = (this.userInfo.examAnswer || '').split(',');
				const sectionDetail = test.map((item, index) => {
					const { orderNum, optionList, answer } = item;
					const options = optionList.split(',');
					const radio = examAnswer[index] || '';
					return {
						orderNum,
						options,
						radio,
						answer,
					};
				});
				this.sectionDetail = sectionDetail;
			},
			async startTest() {
				if (this.userInfo.InExamId) {
					return;
				} else {
					let data = await startTest(this.id);
					this.$refs.audio.examPlay();
				}
			},
			getAnswer(isSuspend = true) {
				let radioMap = {
					0: 'A',
					1: 'B',
					2: 'C',
					3: 'D',
				};
				return this.sectionDetail
					.map((item) => {
						return isSuspend ? item.radio : radioMap[item.radio];
					})
					.join(',');
			},
			leaveTest() {
				this.suspendTest();
				this.$router.push('/user/home');
			},
			async suspendTest() {
				let examTime = this.currentTime + ',' + this.examTime + ',' + this.audioUrl;
				let params = {
					id: this.id,
					examAnswer: this.getAnswer(),
					examTime,
				};
				this.$refs.audio.playAudio();
				let data = await suspendTest(params);
			},
			async stopTest() {
				let params = { answer: this.getAnswer(true) };
				let data = await stopTest(params);
				this.isStopExam = true;
				this.$router.push('/user/home');
			},
			getInsert(order) {
				let orderMap = {
					1: 'Questions 1 and 2 are based on the news report you have just heard.',
					3: 'Questions 3 and 4 are based on the news report you have just heard.',
					5: 'Questions 5 to 7 are based on the news report you have just heard.',
					8: 'Questions 8 to 11 are based on the conversation you have just heard.',
					12: 'Questions 12 to 15 are based on the conversation you have just heard.',
					16: 'Questions 16 to 18 are based on the passage you have just heard.',
					19: 'Questions 19 to 21 are based on the passage you have just heard.',
					22: 'Questions 19 to 21 are based on the passage you have just heard.',
				};
				return orderMap[order] || '';
			},
		},
	};
</script>

<style lang="scss" scoped>
	.exam {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 30px;
		.info {
			/* border: 2px solid #000; */
			box-shadow: 0 0 5px 1px #999;
			padding-top: 12px;
			border-radius: 2px;
			width: 100%;
			height: 150px;
			& > div {
				/* border: 2px solid #000; */
				box-shadow: 0 0 5px 1px #999;
				border-radius: 2px;
			}
			.name {
				margin: 20px 0 0 20px;
				float: left;
				width: 185px;
				min-height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 24px;
				font-weight: 500;
			}
			.title,
			.score {
				margin: 0 auto;
				margin-top: 20px;
				width: 35%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				font-size: 24px;
				font-weight: 500;
				color: #000;
			}
			.score {
			}
		}

		.audio {
			display: flex;
			align-items: center;
			font-size: 24px;
			font-weight: 500;
			width: 70%;
			margin: 15px auto;
		}
		.content {
			width: 70%;
			margin: 0 auto;
			font-size: 20px;
			font-weight: 500;
			.section {
				margin-top: 10px;
				font-weight: bold;
			}
			.describe {
				margin-top: 10px;
				& > span {
					font-size: 16px;
				}
			}
			.detail {
				margin-top: 15px;
				width: 100%;
				padding: 20px;
				/* border: 2px solid #000; */
				border-radius: 2px;
				box-shadow: 0 0 5px 1px #999;
				.list {
					font-size: 16px;
					margin-top: 10px;
					.insert {
						font-weight: 600;
						margin: 10px 0 20px 0;
						width: 100%;
					}
				}
			}
		}
		.footer {
			margin-top: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			.leave,
			.submit {
				width: 100px;
				padding: 20px;
				font-size: 20px;
				font-weight: 500;
				/* border: 2px solid #000; */
				text-align: center;
				margin: 5px;
			}
		}
	}
	.exam ::v-deep .el-radio__input.is-checked .el-radio__inner {
		border-color: #56bf8b;
		background: #56bf8b;
	}
	.exam ::v-deep .el-radio__input.is-checked + .el-radio__label {
		color: #56bf8b;
	}
</style>
